import React, { useState } from 'react';
import { Flex } from 'antd';
import MyCheckbox from '../';

export default () => {
  const [checked, setChecked] = useState(false);
  const [groupValue, setGroupValue] = useState<string[]>([]);

  const options = [
    { label: '选项1', value: '1' },
    { label: '选项2', value: '2' },
    { label: '选项3', value: '3' },
  ];

  return (
    <Flex vertical gap="middle">
      <Flex vertical gap="small">
        <div>基本用法：</div>
        <Flex gap="small">
          <MyCheckbox>Checkbox</MyCheckbox>
          <MyCheckbox defaultChecked>默认选中</MyCheckbox>
          <MyCheckbox disabled>禁用</MyCheckbox>
          <MyCheckbox checked={checked} onChange={(e) => setChecked(e.target.checked)}>
            受控组件
          </MyCheckbox>
        </Flex>
      </Flex>

      <Flex vertical gap="small">
        <div>复选框组：</div>
        <Flex gap="small">
          <MyCheckbox.Group
            options={options}
            value={groupValue}
            onChange={(value) => setGroupValue(value)}
          />
        </Flex>
      </Flex>

      <Flex vertical gap="small">
        <div>默认选中：</div>
        <Flex gap="small">
          <MyCheckbox.Group
            options={options}
            defaultValue={['1']}
          />
        </Flex>
      </Flex>
    </Flex>
  );
}; 